<template>
    <div class="app-container">
        <el-row :gutter="10" class="mb8">
            <el-col :span="4">
                <el-input
                    v-model="queryParams.searchValue"
                    placeholder="请输入云服务名称"
                    clearable
                    @keyup.enter.native="getList"
                />
            </el-col>
            <el-col :span="1.5">
                <el-button
                    type="primary"
                    icon="el-icon-search"
                    size="small"
                    style="margin-top : 2px"
                    @click="getList"
                    >搜索</el-button
                >
            </el-col>
        </el-row>
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button
                    type="primary"
                    icon="el-icon-plus"
                    size="mini"
                    @click="handleAdd"
                    >新增</el-button
                >
            </el-col>
           <!-- <el-col :span="1.5">
                <el-button
                    type="success"
                    icon="el-icon-edit"
                    size="mini"
                    :disabled="single"
                    @click="handleUpdate"
                    >修改</el-button
                >
            </el-col>   -->
            <el-col :span="1.5">
                <el-button
                    type="danger"
                    icon="el-icon-delete"
                    size="mini"
                    :disabled="multiple"
                    @click="handleDelete"
                    >删除</el-button
                >
            </el-col>
        </el-row>
        <el-table
            v-loading="loading"
            :data="logicList"
            @selection-change="handleSelectionChange"
        >
            <el-table-column type="selection" width="50" />
            <el-table-column label="云服务编号" prop="cloudSupplier" />
            <el-table-column
                label="云服务名称"
                prop="cloudSupplierName"
                :show-overflow-tooltip="true"
            />
            <el-table-column label="联系人邮箱" prop="contactEmail" />
            <el-table-column label="联系人名字" prop="contactName" />
            <el-table-column label="联系人电话" prop="contactPhone" />
            <el-table-column label="管理角色" prop="roleName" />
            <el-table-column label="地址" prop="location" />
            <el-table-column label="描述" prop="magDesc" />
            <!-- <el-table-column label="创建时间" prop="createTime" width="160">
                <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.createTime) }}</span>
                </template>
            </el-table-column> -->
            <el-table-column
                label="操作"
                width="200"
                class-name="small-padding fixed-width"
            >
                <template slot-scope="scope">
                    <el-button
                        v-if="scope.row.userId !== 1"
                        size="mini"
                        type="text"
                        icon="el-icon-edit"
                        @click="handleUpdate(scope.row)"
                        >修改</el-button
                    >
                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-delete"
                        @click="handleDelete(scope.row)"
                        >删除</el-button
                    >
                </template>
            </el-table-column>
        </el-table>
        <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
        />

        <!-- 新增删除弹出框 -->
        <el-dialog
            :title="title"
            :visible.sync="open"
            width="50%"
            append-to-body
            >.
            <el-form ref="form" :model="form" :rules="rules" label-width="120px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="云服务编号" prop="cloudSupplier">
                            <el-input
                                v-model="form.cloudSupplier"
                                placeholder="请选择云服务编号"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="云服务名称" prop="cloudSupplierName">
                            <el-input
                                v-model="form.cloudSupplierName"
                                placeholder="请输入云服务名称"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item
                            label="联系人邮箱"
                            prop="contactEmail"
                        >
                            <el-input
                                v-model="form.contactEmail"
                                placeholder="请输入联系人邮箱"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="联系人名字" prop="contactName">
                            <el-input
                                v-model="form.contactName"
                                placeholder="请输入联系人名字"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item
                            label="联系人电话"
                            prop="contactPhone"
                        >
                            <el-input
                                v-model="form.contactPhone"
                                placeholder="请输入联系人电话"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="管理角色" prop="roleKey">
                            <!-- multiple -->
                        <el-select style="width: 100%;" @change="xxx" v-model="form.roleKey" clearable placeholder="请选择管理角色">
                            <el-option
                            v-for="item in roleOptions"
                            :key="item.roleKey"
                            :label="item.roleName"
                            :value="item.roleKey"
                            ></el-option>
                        </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="地址" prop="location">
                            <el-input
                                v-model="form.location"
                                placeholder="请输入地址"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item
                            label="描述"
                            prop="magDesc"
                        >
                            <el-input
                                type="textarea"
                                v-model="form.magDesc"
                                placeholder="请输入描述"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitcloudServiceProvider"
                    >确 认</el-button
                >
                <el-button @click="cancelcloudServiceProvider">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import {
    Postlogic,
    Putlogic,
    logicExport,
    logicList,
    Delectlogic,
    logicIds,
} from "@/api/basic/services";
import { getUser } from "@/api/system/user";
export default {
    data() {
        return {
            // 角色选项
            roleOptions: [],
            logicList: [],
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            loading: false,
            total: 0,
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                searchValue : ""
            },
            title:"",
            open:false,
            form : {},
            rules : {
                cloudSupplier : [
                    { required: true, message: '请填写云服务编码', trigger: 'blur' }
                ],
                cloudSupplierName : [
                    { required: true, message: '请填写云服务名称', trigger: 'blur' }
                ],
                roleKey : [
                    { required: true, message: '请选择管理角色', trigger: 'change' }
                ],
            }
        };
    },
    created() {
        this.getList();
        getUser().then(response=>{
            this.roleOptions = response.roles;
        })
    },
    methods: {
        xxx(e){
            this.roleOptions.forEach(item=>{
                if(item.roleKey == e){
                }
            })
        },
        /** 查询用户列表 */
        getList() {
            this.loading = true;
            logicList(this.queryParams).then((response) => {
                this.logicList = response.rows;
                this.total = response.total;
                this.loading = false;
            });
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map((item) => item.id);
            this.single = selection.length != 1;
            this.multiple = !selection.length;
        },
        // 新增
        handleAdd(){
            this.form = {};
            this.open = true;
            this.title = "新增云服务商";
        },
        // 修改
        handleUpdate(row){
            var id = row.id || this.ids;
            this.open = true;
            this.title = "修改云服务商";
            logicIds(id).then((res) => {
                this.form = res.data;
                // this.form.roleId = Number(res.data.roleId)
            });
        },
        // 删除
        handleDelete(row){
            var ConfirmName = row.cloudSupplierName
                ? `是否确认删除名称为${row.cloudSupplierName}的数据项?`
                : `是否确认删除${this.ids.length}项数据?`;
            const serviceId = row.id || this.ids.join(",");
            this.$confirm(ConfirmName, "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(function () {
                    return Delectlogic(serviceId);
                })
                .then(() => {
                    this.getList();
                    this.msgSuccess("删除成功");
                });
        },
        // 提交
        submitcloudServiceProvider(){
            this.$refs["form"].validate((valid) => {
                if (valid) {
                    if (this.form.id != undefined) {
                        Putlogic(this.form).then((response) => {
                            this.msgSuccess("修改成功");
                            this.open = false;
                            this.getList();
                        });
                    } else {
                        Postlogic(this.form).then((response) => {
                            this.msgSuccess("新增成功");
                            this.open = false;
                            this.getList();
                        });
                    }
                }
            });
        },
        // 取消
        cancelcloudServiceProvider(){
            this.open = false
        },
    },
};
</script>
